import  { useState, FC } from 'react';

// 定义 A 组件的 Props 类型
interface AProps {
    onGetAName: (name: string) => void;
}

const A: FC<AProps> = ({ onGetAName }) => {
    const name = 'this is A name';
    return (
        <div>
            this is A component,
            <button onClick={() => onGetAName(name)}>send</button>
        </div>
    );
}

// 定义 B 组件的 Props 类型
interface BProps {
    name: string;
}

const B: FC<BProps> = ({ name }) => {
    return (
        <div>
            this is B component,
            {name}
        </div>
    );
}

const App: FC = () => {
    const [name, setName] = useState<string>('');
    const getAName = (name: string) => {
        setName(name);
    }

    return (
        <div>
            this is App
            <A onGetAName={getAName} />
            <B name={name} />
        </div>
    );
}

export default App;
